<template>
  <div class="main" style="height: 100%;width: 100%">
    <span class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span
    class="item"></span><span class="item"></span><span class="item"></span><span class="item"></span><span
    class="item"></span><span class="item"></span><span class="item"></span>
  </div>
</template>

<script>
  export default {
    name: 'bevel-rectangle',
    data() {
      return {}
    },
    mounted() {

    }
  }
</script>
<style scoped lang="scss">
  $time: random(1)*2+'s';
  @keyframes lighting {
    0% {
      transform: translateX(0px);
    }
    /*50% {background-position: 0 0}*/
    100% {
      transform: translateX(-160px);
    }
  }

  @keyframes lightingAndScale {
    0% {
      transform: scale(1);
      background-color: #063c49;

    }
    50% {
      transform: scale(1.2);
      background-color: #21F5F1;
    }
    100% {
      transform: scale(1);
      background-color: #063c49;

    }
  }

  .item {
    width: 8px;
    height: 100%;
    background-color: #063c49;
    display: inline-block;
    margin-left: 6px;
    animation: lightingAndScale 2s infinite linear;
  }

  .item:nth-child(4n+0) {
    animation-delay: 0.5s;
  }

  .item:nth-child(4n+1) {
    animation-delay: 0.8s;
  }

  .item:nth-child(4n+2) {
    animation-delay: 1s;
  }

  .item:nth-child(4n+2) {
    animation-delay: 1.2s;
  }

</style>
